<template>
  <el-dialog
    width="30%"
    title="选择用户"
    v-if="isSelectUser"
    :visible.sync="isSelectUser"
    append-to-body
    :before-close="
      () => {
        $emit('close');
      }
    "
  >
    <div class="block">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
    </div>
    <div class="box" style="height: 403px; overflow: auto">
      <el-tree ref="tree" check-strictly :data="treeData" node-key="id" show-checkbox @check="check" :default-expanded-keys="['00000000-0000-0000-0000-000000000000']" :render-content="renderContent" highlight-current :filter-node-method="filterNode" :props="defaultProps"></el-tree>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="$emit('close')">取 消</el-button>
      <el-button @click="confirmSelect" type="primary">确 认</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { mapTreeAddIcon } from "@/util/util";
export default {
  props: {
    isSelectUser: {
      type: Boolean,
    }, //选择用户弹窗
    //进入方式 1:调动 2:离职
    enterType: {
      type: Number
    }
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "childrens",
        label: "name",
      },
      filterText: "",
    };
  },
  watch: {
    isSelectUser(val) {
      if (val) {
        this.getSubCompanyView();
      }
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getSubCompanyView();
  },
  methods: {
    check(data, node) {
      console.log(data, node, "check");
      this.$refs.tree.setCheckedKeys([]);
      if (data.type != 3) {
        this.$message.warning("请勾选员工");
      } else {
        if (node.checkedKeys.length > 0) {
          this.$refs.tree.setCheckedKeys([data.id]);
        }
      }
    },
    getLowCheckedNodes() {
      let handleAfterNode = this.$refs.tree.getCheckedKeys();
      const userArr = handleAfterNode.filter((item) => item.type == 3);
      return userArr;
    },

    /** 获取最高层节点 */
    getHigherCheckedNodes(store) {
      const checkedNodes = [];
      const traverse = function (node) {
        const childNodes = node.root ? node.root.childNodes : node.childNodes;
        childNodes.forEach((child) => {
          if (child.checked) {
            checkedNodes.push(child.data);
          }
          if (child.indeterminate) {
            traverse(child);
          }
        });
      };
      traverse(store);
      return checkedNodes;
    },
    confirmSelect() {
      let node = this.$refs.tree.getCheckedNodes();
      console.log(node, "node");
      if (node.length > 0 && node[0].type != 3) {
        this.$message.warning("请选择员工");
        return;
      } else {
        this.$emit("setUserId", node[0].id);
      }
      this.$emit("close");
    },
    async getSubCompanyView() {
      //公司部门子集人员树
      const { data } = await this.$api.personChangeNew[this.enterType == 1 ? "GetNotTransferEmployeeTree" : "GetNotLeaveEmployeeTree"]();
      this.treeData = JSON.parse(JSON.stringify(mapTreeAddIcon(this.handleData([data.data]))));
      // this.updateDefaultCheckKeys();
    },
    handleData(data, parentObj = {}) {
      // 关联父子数据  1   1-1   1-1-1    1-1-1-1   n-n-n-n
      data.map((item, index) => {
        if (parentObj.relatedId) {
          item.relatedId = parentObj.relatedId + `-${index + 1}`;
        } else {
          item.relatedId = index + 1 + "";
        }
        if (item.childrens && item.childrens.length) {
          this.handleData(item.childrens, item);
        }
      });
      return data;
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <img width="15px" src={data.icons} />
          <span title={node.label} style="margin-left:5px;font-size: 12px;position: relative;top: -1px;">
            {node.label.length > 20 ? node.label.slice(0, 20) + "..." : node.label}
          </span>
        </span>
      );
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
  },
};
</script>
<style lang="less" scoped></style>
